<!--  -->
<template>
  <div class="address">
    <h2>我的地址信息</h2>
    <el-button class="addbutton" type="primary" @click="dialogAddVisible = true">添加地址</el-button>
    <el-radio-group v-model="radio1" >
    <el-table
      ref="multipleTable"
      :data="addressInfoList"
      tooltip-effect="dark"
      style="width: 100%" border
    >
    <el-table-column  label="#" type="index" width="40"> </el-table-column>
      <el-table-column prop="username" label="姓名" width="80"> </el-table-column>
      <el-table-column prop="telephone" label="手机号" width="120"> </el-table-column>
      <el-table-column prop="city" label="城市" width="150"> </el-table-column>
      <el-table-column prop="detailAddress" label="详细地址" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="defaultStatus" width="80" label="是否默认">
        <template slot-scope="scope">
          <el-radio :label="scope.row.id">{{scope.row.defaultStatus === 1? '是':"否"}}</el-radio>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary"  icon="el-icon-edit" size="mini"
            ></el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, addressInfoList)"
            type="primary" icon="el-icon-delete"
            size="mini">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-radio-group>
     <el-dialog title="添加地址" :visible.sync ="dialogAddVisible">
    <el-form
      :model="addressInfo"
      ref="addressInfo"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm addressUpdate"
    >
      <el-form-item label="姓名" prop="username">
        <el-input style="width: 400px" v-model="addressInfo.username"></el-input>
      </el-form-item>
      <el-form-item style="width: 500px" label="手机号" prop="telephone">
        <el-input v-model="addressInfo.telephone"></el-input>
      </el-form-item>
      <el-form-item style="width: 500px" label="城市" prop="placeholders">
          <VDistpicker v-model="placeholders" @selected="selectCity"></VDistpicker>
      </el-form-item>
      <el-form-item style="width: 500px" label="详细地址" prop="detailAddress">
        <el-input v-model="addressInfo.detailAddress"></el-input>
      </el-form-item>
      <!-- <el-form-item label="是否默认" prop="defaultStatus">
        <el-radio v-model="addressInfo.defaultStatus" label=1>是</el-radio>
        <el-radio v-model="addressInfo.defaultStatus" label=2>否</el-radio>
      </el-form-item> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="changDdialogAddVisible">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑框展示 -->
    <el-dialog title="编辑收货地址" :visible.sync ="dialogFormVisible">
      <el-form
        :model="editAddressInfo"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm addressUpdate"
      >
        <el-form-item label="收货人姓名" prop="username">
          <el-input style="width: 400px" v-model="editAddressInfo.username"></el-input>
        </el-form-item>
        <el-form-item style="width: 500px" label="手机号" prop="telephone">
          <el-input v-model="editAddressInfo.telephone"></el-input>
        </el-form-item>
         <el-form-item style="width: 500px" label="城市" >
          <VDistpicker v-model="editPlaceholders" @selected="editSelectCity"></VDistpicker>
      </el-form-item>
        <el-form-item style="width: 500px" label="收货地址" prop="detailAddress">
          <el-input v-model="editAddressInfo.detailAddress"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdderssInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
import VDistpicker from 'v-distpicker'
export default {
  name: "Address",
  data() {
    return {
      radio1:1,
      addressInfo: {
        userId: "",
        username: "",
        telephone: "",
        detailAddress: "",
        postCode: "",
        defaultStatus: 0,
      },
      // 级联城市
       placeholders: {
          province: '------- 省 --------',
          city: '--- 市 ---',
          area: '--- 区 ---',
      },
      // 修改的级联城市
       editPlaceholders: {
          province: '------- 省 --------',
          city: '--- 市 ---',
          area: '--- 区 ---',
      },
      editAddressInfo: {
      },
      rules: {
        username: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        nadetailAddress: [{ required: true, message: "地址不能为空", trigger: "blur" }],
        placeholders: [{ required: true, message: "城市不能为空", trigger: "blur" }],
        detailAddress: [{ required: true, message: "收获地址不能为空", trigger: "blur" }],
        telephone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请输入合法手机号/电话号",
            trigger: "blur",
          },
        ],
      },
      addressInfoList: [],
      deleAdressID:[],
      multipleSelection: [],
      dialogAddVisible:false,
      // 编辑弹框的显示与隐藏
      dialogFormVisible: false,
      userId:''
    };
  },
  created(){
    this.getAddressInfo()
  },
  components:{
    VDistpicker
  },
   computed: {
    ...mapGetters([ "getUser"])
  },
  methods: {
     ...mapActions(["setUser"]),
    // 编辑弹框显示
    handleClick(row) {
      this.dialogFormVisible = true, 
      this.editAddressInfo = row;
    },
    // 提交编辑信息
    async  submitAdderssInfo(){
      this.editAddressInfo.userId = this.$store.getters.getUser.id;
      this.editAddressInfo.city = this.editAddressInfo.city.join(' ')
      // console.log(this.editAddressInfo)
      const {data:res} = await this.$http.post("xuanmall/wzxuseraddress/update",this.editAddressInfo)
      if(res.msg === 'success'){
        this.$message.success("修改成功")
      }
      else{
        this.$message.error("修改失败")
      }
        this.dialogFormVisible = false, 
        this.getAddressInfo()  
    },
    // 移除操作
    async  deleteRow(index,rows) {
      // console.log(index,rows)
      this.deleAdressID.push(rows[index].id) 
      const {data:res}  = await this.$http.post("xuanmall/wzxuseraddress/delete", this.deleAdressID)
      if(res.msg === "success"){
        this.$message.success("删除成功")
        this.getAddressInfo()  
      }else{
        this.$message.error("删除失败");
      }
    },
    // 获取地址信息
    async  getAddressInfo(){
      const {data:res} = await this.$http.get("xuanmall/wzxuseraddress/info")
      // console.log(res);
      if(res.msg === 'success'){
        res.userAddress.forEach(item =>{
          item.city = item.city.split(' ')
        })
        this.addressInfoList = res.userAddress;
        this.radio1 = res.userAddress.find(item => item.defaultStatus === 1).id 
        console.log("radio1",this.radio1)
      }
    },
    // 选择城市信息
    selectCity(provence){
      this.addressInfo.city = provence.province.value + ' '+ provence.city.value + ' ' +provence.area.value
    },  
    // 编辑选择城市信息
    editSelectCity(provence){
      this.editAddressInfo.city = provence.province.value + ' '+ provence.city.value + ' ' +provence.area.value
    },
    // 添加地址关闭
    changDdialogAddVisible(){
      this.addressInfo = {}
      this.dialogAddVisible = false
      //清除所有校验
      this.$refs.addressInfo.resetFields()
    },
    // 添加新地址
    async onSubmit() {
      // console.log("添加地址");
      this.addressInfo.userId = this.$store.getters.getUser.id
      const { data: res } = await this.$http.post(
        "xuanmall/wzxuseraddress/save",
        this.addressInfo
      );
      // console.log(res)
      if (res.msg === "success") {
        this.$message.success("添加成功");
        this.getAddressInfo()  
      }
      else{
        this.$message.error("添加失败");
      }
      this.addressInfo = {}
        this.dialogAddVisible = false
    },
   
  },
};
</script>
<style lang="less" scoped>
.address {
  h2 {
    font-size: 20px;
    text-align: center;
    margin: 20px;
    color: rgb(66, 64, 64);
    margin: 20px ;
  }
  .addbutton{
    margin: 20px;
  }
}
</style>
